<template>
  <div>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item replace to="/homepage" icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="apps-o">理疗师</van-tabbar-item>
      <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">订单</van-tabbar-item>
      <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>


    <van-tabs v-model="activeTab">
      <van-tab title="全部">
        <order-item v-for="order in allOrders" :key="order.id" :order="order" />
      </van-tab>
      <van-tab title="待支付">
        <order-item v-for="order in unpaidOrders" :key="order.id" :order="order" />
      </van-tab>
      <van-tab title="进行中">
        <order-item v-for="order in processingOrders" :key="order.id" :order="order" />
        <order-item v-for="order in processingOrders1" :key="order.id" :order="order" />
      </van-tab>
      <van-tab title="已完成">
        <order-item v-for="order in completedOrders" :key="order.id" :order="order" />
      </van-tab>
      <van-tab title="待评价">
        <order-item v-for="order in toBeEvaluatedOrders" :key="order.id" :order="order" />
      </van-tab>
      <van-tab title="已取消">
        <order-item v-for="order in cancelledOrders" :key="order.id" :order="order" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import OrderItem from './OrderItem.vue';
import Rant from './Rant.vue'
import axios from "axios";

export default {
  components: {
    OrderItem,
  },
  data() {
    return {
      active:2,
      activeTab: 0,
      orders: [],
      form:{},


    };
  },
  computed: {
    allOrders() {
      return this.orders;
    },
    unpaidOrders() {
      return this.orders.filter(order => order.status.includes('待支付'));
    },
    processingOrders() {
      return this.orders.filter(order => order.status.includes('已接单,即将出发'));
    },
    processingOrders1(){
      return this.orders.filter(order => order.status.includes('等待接单,请您耐心等待…'));
    },
    completedOrders() {
      return this.orders.filter(order => order.status.includes('已完成'));
    },
    toBeEvaluatedOrders() {
      return this.orders.filter(order => order.status.includes('待评价'));
    },
    cancelledOrders() {
      return this.orders.filter(order => order.status.includes('已取消'));
    }
  },
  methods: {
    findAll() {
      // 这里添加获取订单列表的具体逻辑，比如调用后端接口等
      axios.post('http://localhost:10086/particulars/findAll',this.form).then(res => {
        this.orders = res.data;
        // console.log(res.data);
      })
    }
  },
  created() {
    this.findAll();
  }
};
</script>
